import { ElMessageBox, ElMessage } from 'element-plus'
import { IconTypeEnum } from '@/enums/iconTypeEnum'

interface MessageBoxOptions {
    title?: string
    type?: IconTypeEnum
    message?: string
    description?: string
    closeOnClickModal?: boolean
    customClass?: string
    showCancelButton?: boolean
    confirmButtonText?: string
    cancelButtonText?: string
    showClose?: boolean
    // 异步关闭，默认为true，true-确认按钮点击后进入loading状态，需要手动关闭弹窗。 false-点击确认立即关闭弹窗。
    asyncClose?: boolean
}

type MessageBoxCallback = () => void

export const useMessageBox = (options: MessageBoxOptions) => {
    const {
        type = IconTypeEnum.warning,
        title = '',
        message = '', //  文本内容
        description = '', // 描述内容
        customClass = '',
        asyncClose = true,
    } = options

    return new Promise<MessageBoxCallback>((resolve, reject) => {
        const MessageBoxConstructor = ElMessageBox as any
        MessageBoxConstructor({
            ...options,
            title,
            type: '',
            customClass: `custom-message-box ${customClass}`,
            message: `<div class="message-content-box">
                <div class="message-content">
                  <div class="iconfont ${getIconfontClass(type)} type-icon"></div>
                  <div class="right-box">
                    <div class="message">${message}</div>
                    <div class="description">${description}</div>
                  </div>
                </div>
                </div>`,
            beforeClose: (action: string, instance: any, done: Function) => {
                if (action === 'confirm') {
                    if (!asyncClose) {
                        done()
                        resolve(() => {})
                        return
                    }
                    instance.confirmButtonLoading = true
                    // resolve((syncRes: 'success' | 'fail' = 'success') => {
                    //     // 异步请求失败时，只关闭loading，成功时再关闭弹窗
                    //     instance.confirmButtonLoading = false
                    //     if (syncRes === 'success') done()
                    // })
                    resolve(() => {
                        // 异步请求结束时再结束loading，关闭弹窗
                        instance.confirmButtonLoading = false
                        done()
                    })
                } else {
                    done()
                    reject()
                }
            },
            // callback: (action: string) => {
            //     if (action === 'confirm') {
            //         resolve()
            //     } else {
            //         reject()
            //     }
            // },
            dangerouslyUseHTMLString: true, //是否将 message 作为 HTML 片段处理
            showCancelButton: options.showCancelButton ?? true,
        })
    })
}

const getIconfontClass = (type: IconTypeEnum) => {
    switch (type) {
        case IconTypeEnum.warning:
            return 'icon-gantanhao'
        case IconTypeEnum.error:
            return 'icon-fail'
        case IconTypeEnum.tip:
            return 'icon-wenhao-xianxingyuankuang'
        case IconTypeEnum.success:
            return 'icon-succeed'
        default:
            return ''
    }
}

export function useMessage(type: 'success' | 'warning' | 'info' | 'error', message: string, showClose: boolean = false, center: boolean = true) {
    ElMessage({
        message,
        type,
        showClose,
        center,
        duration: 2000,
        customClass: 'custom-message-class',
    })
}
